<template>
  <div class="Feedback">
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>意见反馈</h1>
      <div></div>
    </div>
    <p>问题类型</p>
    <ul class="ProblemType">
      <li :class="cons == 0 ? 'con' : ''" @click="cons = 0">
        <div class="icon-feedback-read"></div>
        章节/图片
      </li>
      <li :class="cons == 1 ? 'con' : ''" @click="cons = 1">
        <div class="icon-feedback-bug"></div>
        产品bug
      </li>
      <li :class="cons == 2 ? 'con' : ''" @click="cons = 2">
        <div class="icon-feedback-act"></div>
        缺乏互动性
      </li>
      <li :class="cons == 3 ? 'con' : ''" @click="cons = 3">
        <div class="icon-feedback-other"></div>
        其他
      </li>
    </ul>
    <p>反馈内容</p>
    <van-field
      v-model="value"
      rows="2"
      autosize
      type="textarea"
      maxlength="800"
      placeholder="在此输入内容"
      show-word-limit
    />
    <p>联系邮箱</p>
    <div class="mailbox">
      <div class="icon-feedback-xinfeng"></div>
      <input
        type="text"
        placeholder="请在此填写邮箱地址，方便我们联系您"
        v-model="vas"
      />
    </div>
    <div class="add" @click="add">提交反馈</div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      cons: 0,
      value: "",
      vas: "",
    };
  },
  methods: {
    returns() {
      this.$router.go("-1");
    },
    add() {
      let mailbox = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (mailbox.test(this.vas)) {
        Toast("提交成功");
        this.vas = null;
        this.$router.go("-1");
      } else {
        Toast("请填写正确的反馈内容");
      }
    },
  },
};
</script>
<style lang="less">
.Feedback {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cancel {
      font-size: 14px;
      color: black;
    }
    div {
      width: 60px;
      font-size: 20px;
      color: #fc6976;
      padding: 0 10px;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
    }
  }
  p {
    margin: 10px;
    padding: 0 10px;
    border-left: 2px solid #fc6a77;
    font-size: 14px;
    color: #999;
  }
  .ProblemType {
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    li {
      border: 1px solid #eaeaea;
      width: 90px;
      height: 90px;
      text-align: center;
      font-size: 12px;
      color: #999;
      div {
        width: 30px;
        height: 30px;
        margin: 10px auto;
        background-image: url(../../assets/opinion.png);
        background-size: 300%;
        background-repeat: no-repeat;
      }
      .icon-feedback-read {
        background-position: 48% 100%;
      }
      .icon-feedback-bug {
        background-position: 48% -5%;
      }
      .icon-feedback-other {
        background-position: -3% 100%;
      }
    }
    .con {
      box-shadow: inset 0 0 0 1px #fc6976;
      background-color: #ddd;
    }
  }
  .mailbox {
    width: 96%;
    margin: 0 auto;
    position: relative;
    border-bottom: 1px solid #ddd;
    display: flex;
    .icon-feedback-xinfeng {
      width: 30px;
      height: 30px;
      margin: 0 1%;
      background-image: url(../../assets/opinion.png);
      background-size: 300%;
      background-repeat: no-repeat;
      background-position: 100% -6%;
    }
    input {
      font-size: 14px;
      color: #999;
      flex: 1;
      border: none;
    }
  }
  .add {
    width: 96%;
    height: 40px;
    line-height: 40px;
    margin: 10% auto;
    border-radius: 20px;
    background-color: #fc6976;
    color: white;
    text-align: center;
  }
}
</style>